<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="1500" height="800" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
   </canvas>
        
</body>
<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	
    //公式：y=A*sin[ω(x-x0)+φ]+y0  
    var x0=200;//原点的x左边
    var y0=300;//原点的y坐标   
    var A=200;//振幅A
    var fi=0;//相位
    var N=100; //一个周期分成N个点
    var w=Math.PI/100;
    var T=2*Math.PI/w;//周期T=2π/ω
	var step=T/N;//X轴步长,一个周期分成N个点
    ctx.moveTo(x0,y0);  
    for (var i=1; i<=3*N; i++){	
        var x=x0+step*i; //正弦波传入的：X轴坐标
        var y=A*Math.sin(w*(x-x0)+fi);//正弦波计算的Y的大小
	    var Y=y0-y; 
        console.log("i="+i+": x="+x+",y="+y+",Y="+Y);
        ctx.lineTo(x,Y);  
        ctx.moveTo(x,Y);      
    } 
    ctx.moveTo(x0,y0); 
	ctx.stroke();
</script> 
</html>